import React, {Component} from 'react';
import {Tabs, WhiteSpace, Flex, Icon, NavBar} from 'antd-mobile';
import './style.scss'

const inputBg = require('../../assets/img/my/box.png')
const share = require('../../assets/img/my/share.png')
const face = require('../../assets/img/my/face.png')
const none = require('../../assets/img/my/none.png')

class MyInviteComponent extends Component {
    render() {
        const one = <div className={'my-tab'}>
            邀请人数(人)<br/>
            <span className={'my-tab-num'}>5</span>
        </div>
        const two = <div className={'my-tab'}>
            待收佣金(元)<br/>
            <span className={'my-tab-num'}>5</span>
        </div>
        const three = <div className={'my-tab'}>
            已收佣金(元)<br/>
            <span className={'my-tab-num'}>5</span>
        </div>
        const tabs = [
            {title: one},
            {title: two},
            {title: three},
        ];
        const style = {
            tabBarInactiveTextColor: '#4e5259',
            tabBarTextStyle: {
                color: '#4e5259',
            },
            tabBarUnderlineStyle: {
                borderColor: '#f04349'
            },
            tabBarActiveTextColor: '#f04349',
            onTabClick: this.onTabClick
        }
        const goBack = () => {
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            if (isAndroid) {
                android.back()
            } else {
                var message = {"method": "back"};
                window.webkit.messageHandlers.ios.postMessage(message);
            }
        }
        const status = false
        return <div className={'my-invite-wrap'}>
            <NavBar mode="light"
                    onLeftClick={() => goBack()}
                    icon={<Icon type="left"/>}
                    className='title'>我的邀请</NavBar>
            <div className={'my-banner'}>
                <div className={'input-bg'}>
                    <img src={inputBg} width={'100%'} alt=""/>
                    <p>我的邀请码：888888</p>
                </div>
            </div>
            <div className={'my-content'}>
                <Tabs tabs={tabs}
                      {...style}>
                    <div>
                        {
                            status ? [
                                    <Flex className={'flex-label'}>
                                        <Flex.Item>注册日期</Flex.Item>
                                        <Flex.Item>注册手机号</Flex.Item>
                                        <Flex.Item>是否实名</Flex.Item>
                                    </Flex>,
                                    <div className={'flex-list'}></div>
                                ]
                                : <img src={none} className={'my-none-img'} alt=""/>

                        }


                    </div>
                    <div>
                        <Flex className={'flex-label'}>
                            <Flex.Item>到期日期</Flex.Item>
                            <Flex.Item>待收佣金(元)</Flex.Item>
                            <Flex.Item>注册手机号</Flex.Item>
                        </Flex>
                        <div className={'flex-list'}>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                        </div>
                    </div>

                    <div>
                        <Flex className={'flex-label'}>
                            <Flex.Item>到期日期</Flex.Item>
                            <Flex.Item>待收佣金(元)</Flex.Item>
                            <Flex.Item>注册手机号</Flex.Item>
                        </Flex>
                        <div className={'flex-list'}>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                            <Flex className={'flex-list-item'}>
                                <Flex.Item>2018-01-11</Flex.Item>
                                <Flex.Item>231.89(元)</Flex.Item>
                                <Flex.Item>134****3445</Flex.Item>
                            </Flex>
                        </div>
                    </div>
                </Tabs>
            </div>
            <div className={'contact'}>
                <div className={'item item-msg'}>
                    <img className={'msg'} src={face} alt=""/>当前邀请
                </div>
                <div className={'item'}>
                    <img className={'phone'} src={share} alt=""/>分享邀请
                </div>
            </div>
        </div>
    }
}

export default MyInviteComponent
